<template>
  <div>
    <h2>组合API-计算属性</h2>
    <hr>
    <div>今年{{age}}岁了</div>
    <div>明年{{nextAge}}岁了</div>
    <button @click="updateAge">点击</button>
  </div>
</template>
<script>
import { ref, computed } from 'vue'

export default {
  name: 'App',
  setup () {
    // 计算属性：支持修改
    const age = ref(18)
    // 基于计算属性的方式计算明年几岁了
    const nextAge = computed({
      get () {
        // 获取计算结果时自动触发
        return age.value + 1
      },
      set (v) {
        // 修改计算属性的值自动触发set方法
        age.value = v - 1
      }
    })
    // 控制修改计算属性
    const updateAge = () => {
      nextAge.value = 21
    }
    return { age, nextAge, updateAge }
  }
}
</script>
